<template>
  <div class="search">
    <el-form ref="formRef" name="search" :inline="true" :model="searchParam" >
      <div class="search-container">
        <search-button :search="props.search" :reset="props.reset" />
      </div>
    </el-form>
    <permission v-if="props.roles && props.roles.length > 0" :roles="props.roles"/>
  </div>
</template>

<script setup name="MenuSearch">
import {systemStoreHook} from "@/stores/modules";
import Permission from '@/components/Permission/index.vue';
import SearchButton from "@/components/SearchButton/index.vue";

const formRef = ref();
const systemStore = systemStoreHook();
let searchParam = systemStore.getMenuSearch;

const props = defineProps({
  roles: {
    type: Array,
    required: true
  },
  search: {
    type: Function,
    required: true
  },
  reset: {
    type: Function,
    required: true
  }
});

//重置
function handleReset() {
  formRef.value?.resetFields();
}
defineExpose({
  handleReset
})
</script>

<style scoped></style>
